<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Opacity制作过渡色块</title>
	<style>
		.row {
			overflow: hidden;
		}
		.row div {
			width: 80px;
			height: 80px;
			line-height: 80px;
			text-align: center;		
			float: left;	
		}
		.row:nth-of-type(1) div {
			background: #000;
			color: #fff;
		}
		.row:nth-of-type(2) div {
			background: red;
		}
		.row:nth-of-type(3) div{
			background: green;
		}
		.row:nth-of-type(4) div{
			background: blue;
		}
		.row div:nth-child(1){
			background: #000;
			color: #fff;
		}
		.row div:nth-child(2){
			opacity: 1;
		}
		.row div:nth-child(3){
			opacity: 0.8;
		}
		.row div:nth-child(4){
			opacity: 0.6;
		}
		.row div:nth-child(5){
			opacity: 0.4;
		}
		.row div:nth-child(6){
			opacity: 0.2;
		}
		.row:nth-of-type(1) div {
			opacity: 1;
		}
	</style>
</head>
<body>
	<div class="demo">
		<div class="row">
			<div></div>
			<div>1</div>
			<div>0.8</div>
			<div>0.6</div>
			<div>0.4</div>
			<div>0.2</div>
		</div>
		<div class="row">
			<div>red</div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="row">
			<div>green</div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="row">
			<div>blue</div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</body>
</html>